page {
	background-color: #f3f3f3;
}

.content {
	&-showfn{
		padding-bottom: 0rpx;
		padding-bottom: calc(420rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(420rpx + env(safe-area-inset-bottom) );
		/* #ifdef MP-WEIXIN */
		/* #endif */
	}
	&-box {
		width: 100%;
		height: auto;
		min-height: calc(100vh - env(safe-area-inset-top) - 200rpx);
		box-sizing: content-box;
		position: relative;
		padding-bottom: 120rpx;
		
		/* #ifdef APP-PLUS  */
		margin-bottom: 0rpx;
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
		/* #endif */
		/* #ifdef MP-WEIXIN */
		padding-bottom: 0rpx;
		padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom) );
		/* #endif */
	
		&-bg {
			width: 100%;
			position: fixed;
			/* #ifdef MP-WEIXIN */
			bottom: 0;
			bottom: constant(safe-area-inset-bottom);
			bottom: env(safe-area-inset-bottom);
			/* #endif */
			/* #ifndef MP-WEIXIN */
			top: 0;
			left: 0;
			/* #endif */
		}

		&-loading {
			text-align: center;
			padding: 20rpx 0;
		}

		.message {
			padding: 13rpx 20rpx;
		}
		
		.message-item {
			display: flex;
			z-index: 99;
			justify-content: flex-start;
			align-items: flex-start;
			align-content: flex-start;
			flex-wrap: nowrap;
			flex-direction: row;

			.username{
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.img {
				width: 80rpx;
				height: 80rpx;
				border-radius: 5rpx;
			}
			

			.content {
				padding: 20rpx;
				max-width: 500rpx;
				border-radius: 10rpx;
				font-size: 30rpx;
			}
			
			//红包
			.contentType4{
				position: relative;
				font-size: 0.4rem;
				min-width: 200px;
				.open{
					background-color: #F09D47;
				}
				.close{
					background-color: #ffdebc;
				}
				.packet {
				  height: 80rpx;
				  color: #fff;
				  padding: 20rpx;
				  display: flex;
				  //background-color: #ffdebc;
				  line-height: 60rpx;
				  font-size: 25rpx;
				  font-weight: 400;
				  .img{
					  margin-right: 20rpx;
					  width: 70rpx;
					  height: 70rpx;
					  image{
						  width: 100%;
						  height: 100%;
					  }
				  }
				}
				.tag {
				  height: 50rpx;
				  line-height: 50rpx;
				  font-size: 25rpx;
				  font-weight: 400;
				  //background: #F09D47;
				  //border-top: 1px solid #f9b56f;
				  padding-left: 20rpx;
				  color: #fff;
				}
				.arrow {
				  width: 10px;
				  height: 10px;
				  position: absolute;
				  background: #F09D47;
				  right: -10rpx;
				  top: 15px;
				  transform: rotate(45deg);
				}
			}
			
			
			
			// 语音
			.contentType2 {
				display: flex;
				flex-direction: row;
				align-items: center;
				.voice_icon {
					height: 34rpx;
					width: 34rpx; 
					background-repeat: no-repeat;
					background-size: 100%;
				}
				.voice_icon_right {
					background-image: url(../../static/voice-left-3.png);
					margin-left: 10rpx;
				}
				.voice_icon_left {
					background-image: url(../../static/voice-right-3.png);
					margin-right: 10rpx;
				}
				.voice_icon_right_an {
					animation: voiceAn_right 1s linear alternate infinite;
				}
				.voice_icon_left_an {
					animation: voiceAn_left 1s linear alternate infinite;
				}
				@keyframes voiceAn_right {
					0% {
						background-image: url(../../static/voice-left-1.png);
					}
					50% {
						background-image: url(../../static/voice-left-2.png);
					}
					100% {
						background-image: url(../../static/voice-left-3.png);
					}
				}
				@keyframes voiceAn_left {
					0% {
						background-image: url(../../static/voice-right-1.png);
					}
					50% {
						background-image: url(../../static/voice-right-2.png);
					}
					100% {
						background-image: url(../../static/voice-right-3.png);
					}
				}
			}
			
			//图片
			.contentType3{
				padding: 0;
				border-radius: 2rpx;
				background-color: transparent !important;
				.img{
					width: 200rpx;
					height: auto;
					max-width: 300rpx;
					max-height: 400rpx;
				}
			}
			.contentType3::after{
				border: none !important;
				display: none !important;
			}
			.content-type-right {
				flex-direction: row-reverse;
			}

			&.right {
				flex-direction: row-reverse;
				.content {
					background-color: #C6EBFE;
					margin-right: 28rpx;
					word-break: break-all;
					line-height: 36rpx;
					position: relative;

					&::after {
						content: '';
						display: block;
						width: 0;
						height: 0;
						border-top: 10rpx solid transparent;
						border-bottom: 10rpx solid transparent;
						border-left: 16rpx solid #C6EBFE;
						position: absolute;
						right: -16rpx;
						top: 30rpx;
					}
				}
			}

			&.left {
				.content {
					background-color: #333;
					margin-left: 28rpx;
					word-break: break-all;
					line-height: 36rpx;
					position: relative;
					color: #fff;

					&::after {
						content: '';
						display: block;
						width: 0;
						height: 0;
						border-top: 10rpx solid transparent;
						border-bottom: 10rpx solid transparent;
						border-right: 16rpx solid #333;
						position: absolute;
						left: -16rpx;
						top: 30rpx;
					}
				}
			}
		}
	}

	.input-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: content-box;
		z-index: 999;
		background-color: #F6F7F8;
		
		/* #ifdef APP-PLUS */
		margin-bottom: 0rpx;
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
		/* #endif */
		/* #ifdef MP-WEIXIN */
		padding-bottom: 0rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		/* #endif */

		&-flex {
			border-bottom: 2rpx solid #eaeaea;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			padding: 20rpx;
			box-sizing: border-box;
			image{
				width: 56rpx;
				height: 56rpx;
			}
			.icon_img {
				margin-right: 20rpx;
			}
			.icon_btn_add{
				margin-left: 20rpx;
				margin-right: 20rpx;
			}
			&-grow {
				flex-grow: 1;

				.content {
					box-sizing: border-box;
					background-color: #fff;
					height: 80rpx;
					padding: 0 20rpx;
					border-radius: 12rpx;
					font-size: 28rpx;
					caret-color: $uni-color-success;
				}

				.voice_title {
					text-align: center;
					background-color: #ffffff;
					height: 80rpx;
					line-height: 80rpx;
					border-radius: 12rpx;
				}
			}

			.btn {
				margin-left: 20rpx;
				background-color: $uni-bg-theme;
				border: none;
			}
		}
		
		.fun-box{
			opacity: 0;
			transition: all 0.1s ease-in-out;
			height: 0;
			//padding-top: 30rpx;
			
			.img{
				width: 100rpx;
				height: 100rpx;
			}
		}
		.show-fun-box{
			opacity: 1;
			height: 460rpx;
		}
	}

	.input-box-mpInputMargin {
		/* #ifdef MP-WEIXIN */
		padding-bottom: 0rpx;
		/* #endif */
	}
	.voice_an{
		width: 300rpx;
		height: 300rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-55%);
		background-color: rgba(41,41,41,0.7);
		color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		border-radius: 10rpx;
		.text{
			padding-top: 30rpx;
		}
		@keyframes runVoice{
			0%{
				height: 10%;
			}
			20%{
				height: 50%;
			}
			50%{
				height: 100%;
			}
			80%{
				height: 50%;
			}
			100%{
				height: 0%;
			}
		}	
		.wave{
			width:6rpx;
			height: 100%;
			margin-left: 10rpx;
			border-radius: 50rpx;
			background-color: #999;
			vertical-align: middle;
			display: inline-block;
		}
		.voice_an_icon{
			width: 200rpx;
			height: 100rpx;
			line-height: 50rpx;
			margin: 50rpx 0;
		}
		.voice_an_icon #one{
			animation:runVoice 0.6s infinite 0.1s;
		}
		.voice_an_icon #two{
			animation:runVoice 0.6s infinite 0.3s;
		}
		.voice_an_icon #three{
			animation:runVoice 0.6s infinite 0.6s;
		}
		.voice_an_icon #four{
			animation:runVoice 0.6s infinite 0.1s;
		}
		.voice_an_icon #five{
			animation:runVoice 0.6s infinite 0.3s;
		}
		.voice_an_icon #six{
			animation:runVoice 0.6s infinite 0.6s;
		}
		.voice_an_icon #seven{
			animation:runVoice 0.6s infinite 0.1s;
		}
	}
	.windows{
		.mask{
			position: fixed;
			top: 100%;
			width: 100%;
			height: 100%;
			z-index: 1000;
			background-color: rgba(0,0,0,.6);
			opacity: 0;
			transition: opacity .2s ease-out;
		}
		.layer{
			position: fixed;
			width: 80%;
			height: 70%;
			left: 10%;
			z-index: 1001;
			border-radius: 10rpx;
			overflow: hidden;
			top:100%;
			transform: scale3d(.5,.5,1);
			transition: all .2s ease-out;
		}
		&.show{
			display: block;
			.mask{
				top: 0;
				opacity: 1;
			}
			.layer{
				transform: translate3d(0,-85vh,0) scale3d(1,1,1);
			}
		}
		&.hide{
			display: block;
			.mask{
				top: 0;
				opacity: 0;
			}
			.layer{
				transform: translate3d(0,-85vh,0) scale3d(.5,.5,1);
			}
		}
	}
	.red-packet{
		width: 100%;
		height: 70vh;
		background-color: #EC624F; 
		position: relative;
		
		.avatar{
			padding-top: 100rpx;
			display: flex;
			justify-content: center;
			height: 150rpx;
			text-align: center;
			color: #E7CB9B;
		}
		.desc{
			display: flex;
			justify-content: center;
			text-align: center;
			color: #E7CB9B;
		}
		.money{
			display: flex;
			justify-content: center;
			text-align: center;
			color: #E7CB9B;
			font-size: 70rpx;
		}
		.to{
			display: flex;
			position: absolute;
			bottom: 150rpx;
			width: 100%;
			background-color: #EC624F;
			justify-content: center;
			flex-wrap: wrap;
			
			border-radius: 0 0 100% 100%;
			box-shadow: inset 0 -8upx 0 #DE4129;
			
			.open{
				width: 150rpx;
				height: 150rpx;
				border-radius: 100%;
				background-color: #E7CB9B;
				font-size: 25px;
				text-align: center;
				line-height: 150rpx;
			}
		}
		
		.showDetails{
			position: absolute;
			left: 200rpx;
			display: flex;
			line-height: 60rpx;
			text-align: center;
			font-size: 35rpx;
			color: #E7CB9B;
			bottom: 30rpx;
		}
	}
}